﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
    <script src="/js/data.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/css/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
    <body>
        
        <!-- Templates -->
        
        <div id="itemTemplate-RecentPost-First" data-win-control="WinJS.Binding.Template">
            <div class="item-First">
                <h3 class="item-title win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                <p class="item-teaserContent-first" data-win-bind="innerHTML:teaserContentWithoutImageLong"></p>
                <p class="item-author" data-win-bind="innerHTML:author.name"></p>
                <p class="item-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
            </div>
        </div>
        <div id="itemTemplate-RecentPost-First-Image" data-win-control="WinJS.Binding.Template">
            <div class="item-First" data-win-bind="style.backgroundImage:teaserImageURL">
               
                <div class="item-overlay-image-first">
                    <h3 class="item-image-title-first win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                    <p class="item-image-teaserContent-first" data-win-bind="innerHTML:teaserContentLong"></p>
                    <p class="item-image-author" data-win-bind="innerHTML:author.name"></p>
                    <p class="item-image-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
                </div>
            </div>
        </div>
        
        <div id="itemTemplate-Link" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <h3 class="item-title win-type-ellipsis">Mehr</h3>
            </div>
        </div>

        <div id="itemTemplate-RecentPost" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <div class="item-overlay-without-image">
                    <h3 class="item-title win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                    <p class="item-teaserContent" data-win-bind="innerHTML:teaserContentWithoutImage"></p>
                    <p class="item-author" data-win-bind="innerHTML:author.name"></p>
                    <p class="item-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
                </div>
            </div>
        </div>
        <div id="itemTemplate-Image" data-win-control="WinJS.Binding.Template">
            <div class="item-image" data-win-bind="style.backgroundImage:teaserImageURL">
                <div class="item-overlay">
                    <h3 class="item-image-title win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                    <p class="item-image-teaserContent" data-win-bind="innerHTML:teaserContent"></p>
                    <p class="item-image-author" data-win-bind="innerHTML:author.name"></p>
                    <p class="item-image-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
                </div>
            </div>
        </div>
        <div id="itemTemplate-Category" data-win-control="WinJS.Binding.Template">
            <div class="item-category">
                <h3 class="item-category-title" data-win-bind="innerHTML:title"></h3>
                <h3 class="item-category-count" data-win-bind="innerHTML:post_count"></h3>
            </div>
        </div>
        
        <!-- About Templates -->
        <div id="itemTemplate-About" data-win-control="WinJS.Binding.Template">     
            <div class="about-big">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
            
        </div>
        <div id="itemTemplate-About-Team-team1" data-win-control="WinJS.Binding.Template">
            <div class="about-small">
                <div class="about-image-container">
                        <img id="about-image" src="../../images/about-pics/about.png" />
                    </div>
            </div> 
        </div>
        
        <div id="groupHeaderTemplate" data-win-control="WinJS.Binding.Template">
            <div class="group-header">
                <button class="group-header win-type-interactive" data-win-bind="" onclick="javascript: MyFunctions.headerButtonCallback(this);">
                    <span class="group-title win-type-ellipsis" data-win-bind="textContent:title"></span>
                    <!--<span class="group-chevron"></span>-->
                </button>
            </div>
        </div>
        <div id="groupHeaderTemplate-About" data-win-control="WinJS.Binding.Template">
            <div class="group-header-about">
                <button class="group-header-about win-type-interactive" data-win-bind="" onclick="javascript: MyFunctions.headerButtonCallback(this);">
                    <span class="group-title win-type-ellipsis" data-win-bind="textContent:title"></span>
                    <!--<span class="group-chevron"></span>-->
                </button>
            </div>
        </div>
        <div id="groupHeaderTemplateSnapped" data-win-control="WinJS.Binding.Template">
            <div class="group-header-snapped">
                
            </div>
        </div>
       
        <div id="MyZoomedOutTemplate" data-win-control="WinJS.Binding.Template">
            <div class="semanticZoomItem">
                <h2 class="semanticZoomItem-Text" data-win-bind="innerText:title"></h2>
            </div>
        </div>
        
        <!-- SnappView Templates -->
        <div id="snapHeader" data-win-control="WinJS.Binding.Template">
            <div class="snapHeader">
                <h2 data-win-bind="innerHTML:title"></h2>
            </div>
        </div>
        <div id="snapItem" data-win-control="WinJS.Binding.Template">
            <div class="snapItem_wo_image">
                
                <div class="titleLong win-type-ellipsis" data-win-bind="innerHTML:title"></div>
                <div class="teaserContentLong" data-win-bind="innerHTML:teaserContentSnapped"></div>
                <div class="authorLong" data-win-bind="innerHTML:author.name"></div>
                <div class="teaserDateLong" data-win-bind="innerHTML:teaserDate"></div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <!--<div id="snapAd" data-win-control="WinJS.Binding.Template">
            <div class="snappViewAd" style="width: 292px; height: 60px; z-index: 1; overflow: hidden" 
                data-win-control="MicrosoftNSJS.Advertising.AdControl" 
                data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043074'}">
            </div>
        </div>-->
        <div id="snapItem-image" data-win-control="WinJS.Binding.Template">
            <div class="snapItem">
                <div class="colorAndImageContainer">
                    <div class="snapItem-image" data-win-bind="style.backgroundImage:teaserImageURL"></div>
                </div>
                <div class="title win-type-ellipsis" data-win-bind="innerHTML:title"></div>
                <div class="teaserContent" data-win-bind="innerHTML:teaserContentSnappedImage"></div>
                <div class="author" data-win-bind="innerHTML:author.name"></div>
                <div class="teaserDate" data-win-bind="innerHTML:teaserDate"></div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <div id="snapItem-Link" data-win-control="WinJS.Binding.Template">
            <div class="snapItem-Link">
                <div class="linkTitle">
                    <h3>Mehr</h3>
                </div>
            </div>
        </div>
        <div id="snapItem-category" data-win-control="WinJS.Binding.Template">
            <div class="snapCategory">
                
                <div class="title win-type-ellipsis" data-win-bind="innerHTML:title"></div>
                <div class="post_count win-type-ellipsis" data-win-bind="innerHTML:post_count"></div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <div id="snapList" data-win-control="WinJS.Binding.Template">
            <div id="snappyRecent" data-win-control="WinJS.UI.ListView">
            </div>
        </div>

        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <!--<button class="win-backbutton" aria-label="Back" disabled type="button"></button>-->
                <h1 class="titlearea win-type-ellipsis">
                    <img id="mainlogo" src="/images/assets/mainHubLogo_62xx.png">
                </h1>
            </header>
            <section aria-label="Main content" role="main" style="height: 100%">
                <div class="progress-container">
                    <label class="progressRingText">
                        <progress class="win-ring withText" style="width:60px;height:60px;"></progress>
                    </label>    
                </div>
                
                <div id="snappContainer" style="height: 1px; width: 320px; overflow: auto; min-height: 100%; ">

                    <div id="recentContainer" class="groupContainer">
                        <div id="recentTitle" class="listTitle"></div>
                        <div id="recentListContainer" class="listContainer">
                           <div id="snappyRecentList" data-win-control="WinJS.UI.ListView"></div>                        
                        </div>
                    </div>
                    <div id="offlineContainer" class="groupContainer">
                        <div id="offlineTitle" class="listTitle"></div>
                        <div id="offlineListContainer" class="listContainer">
                           <div id="snappyOfflineList" data-win-control="WinJS.UI.ListView"></div>                        
                        </div>
                    </div>
                    <div id="categoryContainer" class="groupContainer">
                        <div id="categoryTitle" class="listTitle"></div>
                        <div id="categoryListContainer" class="listContainer">
                           <div id="snappyCategoryList" data-win-control="WinJS.UI.ListView"></div>                        
                        </div>
                    </div>
                    <div id="aboutContainer" class="groupContainer">
                        <div id="aboutTitle" class="listTitle"></div>
                        <div class="about-big">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="about-small" id="firstaboutsnap">
                            <div class="about-snap-image-container">
                                <img src="../../images/about-pics/about.png" />
                            </div>
                        </div>
                    </div>
                </div>

                <div id="fullContainer" style="height: 100%;">
                    <div id="semanticZoomDiv" class="win-selectionstylefilled" data-win-control="WinJS.UI.SemanticZoom">
                        <div id="zoomedInListView" class="groupeditemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView"></div>
                        <div id="zoomedOutListView" class="zoomedOut win-selectionstylefilled" data-win-control="WinJS.UI.ListView">
                            <style>
                                /*For hiding the scroll bar*/
                                /*#zoomedOutListView .win-viewport {
                                   overflow-x: hidden !important;
                                   overflow-y: hidden;
                                }*/
                                #zoomedOutListView .win-viewport {
                                    height:1000000px !important;
                                }
                            </style>
                        </div>
                    </div>    
                </div>
                
            </section>
        </div>
    </body>
</html>
